<template>
  <Row :gutter="24" class="statistic">
    <Col :span="8">
      <Card :bordered="false" class="statisticCard">
        <Row>
          <Col :span="18">
            <Space size="middle">
              <Statistic
                :loading="loading.state.value"
                title="今日阅读"
                :value="state.todayViews || 0"
              />
              <Divider type="vertical" />
              <Statistic
                :loading="loading.state.value"
                title="累计文章阅读"
                :value="state.totalViews"
              />
            </Space>
          </Col>
          <Col :span="6" class="icon">
            <EyeOutlined />
          </Col>
        </Row>
      </Card>
    </Col>
    <Col :span="8">
      <Card :bordered="false" class="statisticCard">
        <Row>
          <Col :span="18">
            <Space size="middle">
              <Statistic
                :loading="loading.state.value"
                title="累计获得喜欢"
                :value="state.totalLikes || 0"
              />
              <Divider type="vertical" />
              <Statistic
                :loading="loading.state.value"
                title="平均情绪反馈"
                :value="state.averageEmotion ? state.averageEmotion : ' - '"
              />
            </Space>
          </Col>
          <Col :span="6" class="icon">
            <HeartOutlined />
          </Col>
        </Row>
      </Card>
    </Col>
    <Col :span="8">
      <Card :bordered="false" class="statisticCard">
        <Row>
          <Col :span="18">
            <Space size="middle">
              <Statistic :loading="loading.state.value" title="全站评论" :value="state.comments" />
              <Divider type="vertical" />
              <Statistic :loading="loading.state.value" title="文章" :value="state.articles" />
              <Divider type="vertical" />
              <Statistic :loading="loading.state.value" title="标签" :value="state.tags" />
            </Space>
          </Col>
          <Col :span="6" class="icon">
            <CoffeeOutlined />
          </Col>
        </Row>
      </Card>
    </Col>
  </Row>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useLoading } from '@/handcer'
import { HeartOutlined, EyeOutlined, CoffeeOutlined } from '@ant-design/icons-vue'
import { getStatistics, Statistics } from '@/store/system'
import { Row, Col, Statistic, Divider, Card, Space } from 'ant-design-vue'

const loading = useLoading()
const state = ref<Statistics>({})
const fetchStatistics = () => {
  loading.promise(getStatistics()).then((result) => {
    state.value = result
  })
}

onMounted(() => {
  fetchStatistics()
})
</script>
<style lang="less" scoped>
.statistic {
  .statisticCard {
    user-select: none;

    .icon {
      font-size: 38px;
      line-height: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
